<template>
    <div id="login">
        <div class="login-container">
            <h2 class="title">LOGIN</h2>
            <div class="input-container">
                <input type="text" v-model="account" placeholder="enter your account" autocomplte="false"/>
            </div>
            <div class="input-container">
                <input type="password" v-model="password" placeholder="enter your password" autocomplte="false"/>
            </div>
            <p>if you don't have a account,please <span class="register-btn" v-on:click="goRegister">register</span></p>
            <div class="input-container">
                <span class="login-btn" v-on:click="login">LOGIN</span>
            </div>
        </div>
    </div>
</template>

<script>
    import userApi from '../api/user.js';
    import {ROAST_CONFIG} from "../config";

    export default {
        name: "Login",
        components:{

        },
       data(){
            return {
                account:'',
                password:''
            }
       },
        methods:{
            login(){
                if(this.account.trim()===''||this.password.trim()===''){
                    //console.log('账号或者密码不能为空');
                    this.$toast('账号或者密码不能为空');
                    return false;
                }
                userApi.login(this.account,this.password).then(function (response) {
                    console.log(response.data);
                    var token = response.data.data.token;
                    if(token){
                        var nowTime = this.myCommon.getNowTime();
                        this.$store.dispatch('loginToken',{token:token});
                        window.localStorage.setItem('token',token);
                        window.localStorage.setItem('tokenExpiredIn',nowTime+3600*3*1000);
                        this.$nextTick(()=>{
                            //this.$router.push({name:'home'})
                            axios.defaults.headers.common['Authorization'] = "Bearer "+token;
                            this.$store.dispatch('loadUser');
                            window.location.href = ROAST_CONFIG.APP_URL+"/#/";
                        });
                    }
                }.bind(this)).catch(function (error) {
                    if(error.response){
                        var res = error.response;
                        this.$toast(res.data.message);
                    }
                }.bind(this))
            },
            goRegister(){
                this.$router.push({name:'register'});
            }
        }
    }
</script>

<style lang="scss">
    body{

    }
    #login{
        width: 100%;
        background: url("/images/login_bg.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        -webkit-font-smoothing: antialiased;
        position: fixed;
        align-items: center;


        div.login-container{
            width: 40%;
            margin: 10% auto 0;
            background: rgba(4,4,4,0.56);
            box-shadow: 0px 35px 44px -22px #1f181b;
            padding: 60px 40px;


            h2.title{
                font-size: 19px;
                margin-bottom: 1.5em;
                color: #fff;
                text-align: center;
                letter-spacing: 2px;
            }

            div.input-container{
                position: relative;
                input{
                    outline: none;
                    background: transparent;
                    border: none;
                    border-bottom: 1px solid #DCCBCF;
                    color: #fff;
                    -webkit-appearance: none;
                }
                input:focus{
                    box-shadow: none;
                }

                span.login-btn{
                    display: block;
                    background: white;
                    color: #000;
                    cursor: pointer;
                    width: 120px;
                    height: 35px;
                    line-height: 35px;
                    margin: 0 auto;
                    text-align: center;
                    border-radius: 17px;
                }
            }
            p{
                color: white;
                text-align: center;
            }
            span.register-btn{
                color: #df5799;
                cursor: pointer;
            }
        }
    }
</style>
